[#include "/common/macro/header.ftl" /]
[@header title="菜单权限管理" /]
<body>
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-tab layui-tab-brief">
            <div class="layui-tab-content">
                <div class="layui-tab-item layui-show">
                    <div class="LAY-list-btns" style="margin-bottom: 10px;">
                        <button class="layui-btn layui-btn-sm layui-btn-normal" data-events="add">
                            <i class="layui-icon">&#xe654;</i>添加
                        </button>
                        <button class="layui-btn layui-btn-sm layui-btn-primary" data-events="top" id="top-btn">
                            <i class="layui-icon layui-icon-up"></i>返回上一层
                        </button>
                    </div>
                    <table id="LAY-system-menu-table" lay-filter="LAY-system-menu-table"></table>
                </div>
            </div>
        </div>
    </div>
</div>

<script type="text/html" id="LAY-system-menu-table-bar">
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="edit"><i class="layui-icon">&#xe642;</i></a>
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="del"><i class="layui-icon">&#xe640;</i></a>
    {{# if(d.childNum){ }}
    <a class="layui-btn layui-btn-primary layui-btn-xs" onmouseenter="layer.tips('查看子菜单', this)" lay-event="toChild"><i
            class="layui-icon layui-icon-down"></i></a>
    {{# } }}
</script>

<script type="text/html" id="LAY-system-menu-table-type-tpl">
    {{= menuAuthTypeMap[d.type] }}
</script>

<script type="text/html" id="LAY-system-menu-table-status-tpl">
    <input type="checkbox" lay-filter="LAY-system-menu-table-enabled-btn" lay-skin="switch" lay-text="启用|禁用"
           {{#
           if(d.enabled){
           }}
           checked
           {{#
           }
           }} value="{{d.id}}">

</script>

<script type="text/html" id="LAY-system-menu-table-show-tpl">
    {{# if(d.showMenu) { }}
    <button class="layui-btn layui-btn-sm">展示</button>
    {{# } else { }}
    <button class="layui-btn layui-btn-danger layui-btn-sm">不展示</button>
    {{# } }}
</script>


<script src="${base}/static/layuiadmin/layui/layui.js"></script>
<script>
    var menuAuthTypeMap = {
        'CATALOG': '目录',
        'MENU': '菜单'
    }
    layui.config({
        base: '${base}/static/layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index', 'table', 'form'], function () {
        var $ = layui.$
                , admin = layui.admin
                , setter = layui.setter
                , response = setter.response
                , table = layui.table
                , view = layui.view
                , form = layui.form;

        table.render({
            elem: '#LAY-system-menu-table'
            , url: '${base}/admin/menu_auths'
            , response: {
                statusCode: 20000 //成功的状态码，默认：0
            }
            , page: true
            , cols: [[
                {field: 'name', title: '名称', sort: true}
                , {field: 'type', title: '类型', sort: true, templet: '#LAY-system-menu-table-type-tpl'}
                , {
                    field: 'authority',
                    title: '权限',
                    sort: true
                }, {
                    field: 'href',
                    title: '跳转地址'
                }, {
                    field: 'icon',
                    title: '图标'
                }, {
                    field: 'enabled',
                    title: '是否启用',
                    sort: true,
                    templet: '#LAY-system-menu-table-status-tpl'
                }, {
                    field: 'showMenu',
                    title: '首页展示',
                    sort: true,
                    templet: '#LAY-system-menu-table-show-tpl'
                }, {
                    field: 'orders',
                    title: '排序',
                    sort: true
                }, {
                    title: '操作',
                    width: '150',
                    align: 'center',
                    fixed: 'right',
                    toolbar: '#LAY-system-menu-table-bar',
                    unresize: true
                }
            ]],
            done: function (res, curr, count) {
                if (this.where && this.where.parentId) {
                    $("#top-btn").show();
                } else {
                    $("#top-btn").hide();
                }
                $("#top-btn").attr('data-parent-id', res.grandParentId || '');
            }
        });

        //事件处理
        var events = {
            add: function (othis, type) {
                admin.popup({
                    id: 'LAY-popup-menu-add' //定义唯一ID，防止重复弹出
                    , area: ['800px', '80%']
                    , title: '添加角色'
                    , success: function () {
                        //将 views 目录下的某视图文件内容渲染给该面板
                        layui.view(this.id).render('system/menu_auth/add', {typeMap: menuAuthTypeMap});
                    }
                    , end: function () {
                        table.reload('LAY-system-menu-table'); //刷新表格
                    }
                });
            }, top: function (othis, type) {
                table.reload('LAY-system-menu-table', {
                    page: {
                        curr: 1 //重新从第 1 页开始
                    }
                    , where: {parentId: othis.attr('data-parent-id') || ''}
                }); //刷新表格
            }
        };

        /*切换权限的状态*/
        form.on('switch(LAY-system-menu-table-enabled-btn)', function (data) {
            admin.req({
                url: '/admin/menu_auths/' + data.value + '/toggle_enabled',
                contentType: "application/json"
                , type: 'put'
                , success: function (res) {
                    var statusCode = response.statusCode;
                    if (res[response.statusName] === statusCode.ok) {
                        layer.msg('更新成功！现已' + (res.enabled ? '启用' : '禁用'), {
                            icon: 1
                        });
                    }
                    table.reload('LAY-system-menu-table'); //刷新表格
                }
            });
        });

        //监听工具条
        table.on('tool(LAY-system-menu-table)', function (obj) {
            var data = obj.data;
            if (obj.event === 'edit') {
                admin.popup({
                    id: 'LAY-popup-menu-edit' //定义唯一ID，防止重复弹出
                    , title: '编辑菜单'
                    , area: ['800px', '80%']
                    , success: function () {
                        //将 views 目录下的某视图文件内容渲染给该面板
                        view(this.id).render('system/menu_auth/edit', {
                            id: data.id,
                            typeMap: menuAuthTypeMap
                        });
                    }
                    , end: function () {
                        table.reload('LAY-system-menu-table'); //刷新表格
                    }
                });
            } else if (obj.event === 'del') {
                layer.confirm('确定要删除' + data.name + '菜单吗？', function (index) {
                    admin.req({
                        url: '${base}/admin/menu_auths/' + data.id
                        , type: 'delete'
                        , success: function (res) {
                            var statusCode = response.statusCode;
                            if (res[response.statusName] === statusCode.ok) {
                                layer.msg('删除成功', {
                                    icon: 1
                                });
                                table.reload('LAY-system-menu-table'); //刷新表格
                            }
                        }
                    });
                    layer.close(index);
                });
            } else if (obj.event === 'toChild') {
                table.reload('LAY-system-menu-table', {
                    page: {
                        curr: 1 //重新从第 1 页开始
                    }
                    , where: {
                        parentId: data.id
                    }
                }); //刷新表格
            }
        });

        $('.LAY-list-btns .layui-btn').on('click', function () {
            var othis = $(this)
                    , thisEvent = othis.data('events')
                    , type = othis.data('type');
            events[thisEvent] && events[thisEvent].call(this, othis, type);
        });
    });

</script>
</body>
</html>
